<script lang="ts" setup>
import { ref, reactive, toRef, toRefs } from 'vue'
import FormItem from './Item.vue'
import { Member, UserInfo } from '../enum/index'

interface Props {
    config: Member[],
    dataJson: UserInfo
}
const props = defineProps<Props>()
const arr = toRef(props.config)
</script>
<template>
    <div class="form-config-warpper">
        <template v-for="(item, index) in arr" :key="index">
            <div class="form-config-container">
                <div class="form__label">id=={{ item.id }}</div>
                <div class="form__content">
                    <form-item :config="item" :dataJson="dataJson">
                        <template #tabForm="{ data }">
                            <div class="form-config-child">
                                <form-config :config="data.config" :dataJson="data.dataJson"></form-config>
                            </div>
                        </template>
                    </form-item>
                </div>
            </div>
        </template>
    </div>
</template>
<style>
.form-config-warpper {
}
.form-config-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.form__label {
    width:100px;
}
.form__content {
    flex: 1;
}
.form-config-child {
    background: pink;
    padding:5px;
}
</style>